{extend name="view/base" /}

{block name="head"}
<style type="text/css">
    th, td {
        text-align: center !important;
    }
    .t_0,.t_0:focus{background: #ffffff;color: #000000;}
    .t_1,.t_1:focus{background: #6c757d;color: #ffffff;}
    .t_2,.t_2:focus{background: #ff9c2c;color: #ffffff;}
    .t_3,.t_3:focus{background: #17a2b8;color: #ffffff;}
    .t_4,.t_4:focus{background: #007bff;color: #ffffff;}
    .t_5,.t_5:focus{background: #d12429;color: #ffffff;}
    .t_6,.t_6:focus{background: #9568d1;color: #ffffff;}
    .t_7,.t_7:focus{background: #5b60d1;color: #ffffff;}
    .t_8,.t_8:focus{background: #28a745;color: #ffffff;}
    .t_9,.t_9:focus{background: #e05982;color: #ffffff;}
    .t_o{
        border: 1px solid #ffffff;
    }
</style>
{/block}
{block name="main"}
<div id="create_vue">
    <h1 class="bd-title" id="content">Vue 生成</h1>
    <p>
        <div>{{base_data.db_name}} <sub>（{{base_data.model_name}}）</sub> / {{base_data.table_name}} <sub>（{{base_data.table_title}}）</sub></div>
    </p>
    <hr>
    <div class="mb-3">
        <button type="button" class="btn btn-danger disabled" v-if="field_list.length===0">Vue 代码生成</button>
        <button type="button" class="btn btn-danger" v-if="field_list.length!==0" onclick="create_vue.createVue()">Vue 代码生成</button>
    </div>
    <table class="table table-bordered table-sm table-hover">
        <thead class="thead-dark">
        <tr>
            <th scope="col">#</th>
            <th scope="col">输入组件</th>
            <th scope="col">备注</th>
            <th scope="col">字段</th>
            <th scope="col">字段类型</th>
            <th scope="col">枚举注释</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(list,index) in field_list">
            <th scope="row">{{index+1}}</th>
            <td>
                <select class="form-control form-control-sm"
                        v-model="field_list[index].input_type"
                        :class="{'t_1':field_list[index].input_type==='input','t_2':field_list[index].input_type==='radio','t_3':field_list[index].input_type==='select','t_4':field_list[index].input_type==='image','t_5':field_list[index].input_type==='text','t_6':field_list[index].input_type==='date','t_7':field_list[index].input_type==='number','t_8':field_list[index].input_type==='textarea','t_9':field_list[index].input_type==='int'}">
                    <option v-for="li in input_type" :value="li.type" :class="{'t_0':li.type==='null','t_1':li.type==='input','t_2':li.type==='radio','t_3':li.type==='select','t_4':li.type==='image','t_5':li.type==='text','t_6':li.type==='date','t_7':li.type==='number','t_8':li.type==='textarea','t_9':li.type==='int'}">{{li.name}}</option>
                </select>
            </td>
            <td>{{list.comment}}</td>
            <td>{{list.name}}</td>
            <td>{{list.type}}</td>
            <td>
                <select class="form-control form-control-sm" v-if="list.enum.length!==0">
                    <option v-for="li in list.enum">{{li.name}} - {{li.key}}</option>
                </select>
                <template v-if="list.enum.length===0">—</template>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="modal fade" id="checkDataModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header bg-warning">
                    <h5 class="modal-title" id="exampleModalLongTitle">字段数据不相同</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <template v-if="check_modal.d_null">
                        <div>
                            <p>“数据库”中缺少字段（<template v-for="(li,index) in check_data.d_null"><template v-if="index!==0">、</template>{{li.name}}</template>）</p>
                            <table class="table table-sm table-bordered">
                                <thead class="thead-dark">
                                <tr>
                                    <th scope="col">来源</th>
                                    <th scope="col">字段</th>
                                    <th scope="col">备注</th>
                                    <th scope="col">字段类型</th>
                                    <th scope="col">长度</th>
                                    <th scope="col">允许空</th>
                                </tr>
                                </thead>
                                <tbody>
                                <template v-for="li in check_data.d_null">
                                    <tr>
                                        <td>代码生成</td>
                                        <td>{{li.name}}</td>
                                        <td>{{li.comment}}</td>
                                        <td>{{li.type}}</td>
                                        <td>{{li.length}}</td>
                                        <td>
                                            <template v-if="li.not_null==0">允许空</template>
                                            <template v-if="li.not_null==1">不为空</template>
                                        </td>
                                    </tr>
                                </template>
                                </tbody>
                            </table>
                            <button type="button" class="btn btn-outline-primary" onclick="create_vue.generate_del_field()">删除字段（代码生成）</button>
                            <button type="button" class="btn btn-db" onclick="create_vue.database_add_field()">添加字段（数据库）</button>
                        </div>
                    </template>
                    <template v-if="check_modal.d_null && check_modal.different_field">
                        <hr>
                    </template>
                    <template v-if="check_modal.different_field">
                        <div>
                            <p>“代码生成”与“数据库”字段信息不相同</p>
                            <table class="table table-sm table-bordered">
                                <thead class="thead-dark">
                                <tr>
                                    <th scope="col">来源</th>
                                    <th scope="col">字段</th>
                                    <th scope="col">备注</th>
                                    <th scope="col">字段类型</th>
                                    <th scope="col">长度</th>
                                    <th scope="col">允许空</th>
                                </tr>
                                </thead>
                                <tbody>
                                <template v-for="(li,index) in check_data.different_field">
                                    <tr :class="{'table-secondary':index%2===1}">
                                        <td>数据库</td>
                                        <td>{{li.database.name}}</td>
                                        <td>{{li.database.comment}}</td>
                                        <td>{{li.database.type}}</td>
                                        <td>{{li.database.length}}</td>
                                        <td>
                                            <template v-if="li.database.not_null==0">允许空</template>
                                            <template v-if="li.database.not_null==1">不为空</template>
                                        </td>
                                    </tr>
                                    <tr :class="{'table-secondary':index%2===1}">
                                        <td>代码生成</td>
                                        <td>{{li.generate.name}}</td>
                                        <td>{{li.generate.comment}}</td>
                                        <td>{{li.generate.type}}</td>
                                        <td>{{li.generate.length}}</td>
                                        <td>
                                            <template v-if="li.generate.not_null==0">允许空</template>
                                            <template v-if="li.generate.not_null==1">不为空</template>
                                        </td>
                                    </tr>
                                </template>
                                </tbody>
                            </table>
                            <button type="button" class="btn btn-outline-primary" onclick="create_vue.generate_edit_field()">修改字段（代码生成）</button>
                            <button type="button" class="btn btn-outline-danger" onclick="create_vue.database_rebuild_field()">删除并重建字段（数据库）</button>
                        </div>
                    </template>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="footer"}
<script type="text/javascript">
    const create_vue = new Vue({
        el: '#create_vue',
        data: {
            table_id:0,
            base_data: [],
            field_list: [],
            input_type: [
                {type:'null',name:'无'},
                {type:'input',name:'input 文本框'},
                {type:'radio',name:'radio 单选框'},
                {type:'select',name:'select 选择框'},
                {type:'image',name:'图片上传（单张图片）'},
                {type:'text',name:'富文本编辑器'},
                {type:'date',name:'日期选择器'},
                {type:'number',name:'计数器（价格）'},
                {type:'int',name:'计数器（Int）'},
                {type:'textarea',name:'textarea 文本域'},
            ],
            check_data: {},
            check_modal: {
                d_null: false,
                g_null: false,
                different_field: false
            }
        },
        created() {
            this.get_table_id();
            this.check_field();
        },
        methods: {
            get_table_id(){
                const that = this;
                if(window.sessionStorage.getItem("vue_table_id") === null){
                    window.location.href="{:url('/generate')}";
                }
                that.table_id = window.sessionStorage.getItem("vue_table_id");
            },
            get_list() {
                const that = this;

                $.ajax({
                    url: "{:url('/generate/Api/get_validate_base')}",
                    type: "POST",
                    data: {
                        id: that.table_id
                    },
                    async: true,
                    success: function (res) {
                        if (res.status) {
                            Vue.set(that,'base_data',res.data);
                        }else{
                            Vue.set(that,'base_data',[]);
                        }
                    }
                });
                $.ajax({
                    url:"{:url('/generate/Api/get_field_list')}",
                    type:"POST",
                    data:{
                        id:that.table_id
                    },
                    async:true,
                    success:function (res) {
                        if (res.status){
                            for (let i =0 ;i<res['data'].length;i++){
                                if (res['data'][i]['name']==='id'){
                                    res['data'][i]['input_type']='null';
                                } else if (res['data'][i]['name'].indexOf('Time')>-1 || res['data'][i]['name'].indexOf('time')>-1){
                                    res['data'][i]['input_type']='date';
                                } else if (res['data'][i]['type']==='Decimal'){
                                    res['data'][i]['input_type']='number';
                                }else if (res['data'][i]['type']==='Int' && (res['data'][i]['comment'].indexOf('量')>-1 || res['data'][i]['comment'].indexOf('库存')>-1)) {
                                    res['data'][i]['input_type']='int';
                                }else if (((res['data'][i]['type']==='TinyInt' ||  res['data'][i]['type']==='Enum') || res['data'][i]['name'].indexOf('status')>-1 || res['data'][i]['name'].indexOf('Status')>-1) && res['data'][i]['enum'].length<3) {
                                    res['data'][i]['input_type']='radio';
                                }else if(res['data'][i]['type']==='TinyInt' ||  res['data'][i]['type']==='Enum' || res['data'][i]['comment'].indexOf('类型')>-1 || res['data'][i]['name'].indexOf('status')>-1 || res['data'][i]['name'].indexOf('Status')>-1){
                                    res['data'][i]['input_type']='select';
                                } else if (res['data'][i]['comment'].indexOf('注释')>-1 || res['data'][i]['comment'].indexOf('说明')>-1 || res['data'][i]['comment'].indexOf('备注')>-1 || res['data'][i]['comment'].indexOf('详情')>-1){
                                    res['data'][i]['input_type']='textarea';
                                } else if (res['data'][i]['comment'].indexOf('图')>-1 || res['data'][i]['comment'].indexOf('头像')>-1 || res['data'][i]['comment'].indexOf('照')>-1){
                                    res['data'][i]['input_type']='image';
                                } else if (res['data'][i]['type']==='Text'){
                                    res['data'][i]['input_type']='text';
                                }else{
                                    res['data'][i]['input_type']='input';
                                }
                            }
                            Vue.set(that,'field_list',res.data);
                        }else{
                            Vue.set(that,'field_list',[]);
                        }
                    }
                });
            },
            check_field(){
                $('#checkDataModal').modal('hide');
                const that = this;
                $.ajax({
                    url:"{:url('/generate/Index/check_field')}",
                    type:"POST",
                    data:{
                        table_id:that.table_id
                    },
                    async:true,
                    success:function (res) {
                        if (res.status){
                            Vue.set(that,'check_data',res.data);
                            Vue.set(that.check_modal,'g_null',false);
                            Vue.set(that.check_modal,'d_null',false);
                            Vue.set(that.check_modal,'different_field',false);

                            if (res.data.g_null.length!==0 || res.data.d_null.length!==0 || res.data.different_field.length!==0){
                                $('#checkDataModal').modal('show')
                            }
                            if (res.data.g_null.length!==0){
                                Vue.set(that.check_modal,'g_null',true);
                            }
                            if (res.data.d_null.length!==0){
                                Vue.set(that.check_modal,'d_null',true);
                            }
                            if (res.data.different_field.length!==0){
                                Vue.set(that.check_modal,'different_field',true);
                            }
                        }
                    }
                });
                that.get_list();
            },
            database_add_field(){
                const that = this;
                $.ajax({
                    url:"{:url('/generate/Index/add_field_to_database')}",
                    type:"POST",
                    data:{
                        table_id:that.table_id,
                        field_list: that.check_data.d_null
                    },
                    async:true,
                    success:function (res) {
                        if (res.status){
                            that.check_field();
                        }else{
                            alert(res.msg);
                        }
                    }
                });
            },
            generate_del_field(){
                const that = this;
                $.ajax({
                    url:"{:url('/generate/Index/delete_field_list')}",
                    type:"POST",
                    data:{
                        field_list: that.check_data.d_null
                    },
                    async:true,
                    success:function (res) {
                        if (res.status){
                            that.check_field();
                        }else{
                            alert(res.msg);
                        }
                    }
                });
            },
            database_rebuild_field(){
                const that = this;
                $.ajax({
                    url:"{:url('/generate/Index/database_rebuild_field')}",
                    type:"POST",
                    data:{
                        table_id:that.table_id,
                        field_list: that.check_data.different_field
                    },
                    async:true,
                    success:function (res) {
                        if (res.status){
                            that.check_field();
                        }else{
                            alert(res.msg);
                        }
                    }
                });
            },
            generate_edit_field(){
                const that = this;
                $.ajax({
                    url:"{:url('/generate/Index/generate_edit_field')}",
                    type:"POST",
                    data:{
                        table_id:that.table_id,
                        field_list: that.check_data.different_field
                    },
                    async:true,
                    success:function (res) {
                        if (res.status){
                            that.check_field();
                        }else{
                            alert(res.msg);
                        }
                    }
                });
            },
            createVue() {
                const that = this;
                that.table_id = window.sessionStorage.getItem("vue_table_id");

                $.ajax({
                    url:"{:url('/generate/create_vue/build')}",
                    type:"POST",
                    data:{
                        table_id:that.table_id,
                        field:that.field_list
                    },
                    async:true,
                    success:function (res) {
                        if (res.status){
                            alert('创建成功！');
                        }else{
                            Vue.set(that,'field_list',[]);
                        }
                    }
                });


            }

        }
    });


</script>
{/block}